import React from 'react';
import './index.css';
import mzsdk from '../../../../utils/mzsdk';
import MZActionSheet, { showActionSheet, closeActionSheet } from '../../../../components/MZActionSheet';
import ShopList from '../ShopList';

/**
 * 商品袋组件
 */

var static_total = 0;

export default class ShopBag extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            total: static_total
        })
    }

    componentWillUnmount() {
        mzsdk.mzee.off('goodDetail-update-count')
    }

    componentDidMount() {
        var _this = this;
        mzsdk.mzee.on("goodDetail-update-count", function (e) {
            _this.setState({
                total: e.count
            }, () => {
                static_total = e.count
            })
        })
    }

    showShopList = () => {
        showActionSheet(
            <MZActionSheet title='店铺'>
                <ShopList ticketId={this.props.ticketId} onClose={() => { closeActionSheet() }} />
            </MZActionSheet>
        )
    }

    render() {
        let { total } = this.state;
        return (
            <div className="live-shop-icon-background" onClick={this.showShopList}>
                <div className="shop-count">{total}</div>
            </div>
        )
    }
}
